[제이쿼리] 모든 애니메이션 및 큐 중지하기, finish()

6,474
View Count

주소 복사하기

finish() 함수는 현재 실행되는 모든 애니메이션 효과를 중지시킬 수 있습니다. 이는 stop() 함수의 stop(true, true)와 거의 비슷하나 finish()의 경우 CSS 속성에서 사용되는 애니메이션 역시 멈추게 할 수 있어 좀 더 효과적이고 폭 넓게 사용할 수 있는 장점이 있죠.

* 이 함수는 제이쿼리(jQuery) 1.9 버전에 추가되었습니다.

$(선택요소).finish();

finish() 함수를 클릭하면 해당 요소는 애니메이션을 중지하고 중지된 위치가 아닌 종료될 시점의 마지막 위치로 이동하게됩니다.

# 예제보기

<body>
<span id="test" style="background:#f90;display:block;width:90px;position:relative;">-> TEST BOX</span>
<button id="stop_bt" type="button">finish()</buttom>
</body>

<script type="text/javascript">
$(document).ready(function() {$("#test").animate({left:280}, 20000);
$("#stop_bt").on("click", function(){
$("#test").finish();
});
})
</script>

-> TEST BOX

애니메이션 큐 중지 finish() stop()

아래의 글도 찾고 계시지 않나요?

[제이쿼리] 자식 요소 선택방법 및 찾기, children()

[자바스크립트] 드래그로 선택된 영역의 텍스트 바꾸기